<template>
  <div class="departments-container">
    <el-card class="box-card">
      <!-- <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first">用户管理123</el-tab-pane>
      </el-tabs> -->
      <span class="title">用户管理</span>
      <hr>

      <!-- 展示数据列表 -->

      <div class="main-box">
        <!-- 头部标题 -->
        <!-- 抽离的公共组件 -->
        <tree-tools :node-tree="nodeTree" @add="add" />
        <!-- 主题列表 -->
        <hr>
        <el-tree v-loading="loading" :data="depts" :props="defaultProps">
          <!-- 抽离的公共组件 -->
          <tree-tools slot-scope="{ data }" :node-tree="data" @add="add" @del="del" @edit="edit" />
          <!-- <el-row slot-scope="{ data }">
            <el-col :span="20">
              {{ data.name }}
            </el-col>
            <el-col :span="4">
              <el-row>
                <el-col :span="12">
                  {{ data.manager }}
                </el-col>
                <el-col :span="12">

                  <el-dropdown class="avatar-container" trigger="hover">
                    <div class="avatar-wrapper">
                      <span>操作</span>
                      <i class="el-icon-arrow-down" />
                    </div>
                    <el-dropdown-menu slot="dropdown" class="user-dropdown">

                      <el-dropdown-item>
                        添加子部门
                      </el-dropdown-item>

                      <el-dropdown-item>
                        查看部门
                      </el-dropdown-item>

                      <el-dropdown-item>
                        删除子部门
                      </el-dropdown-item>

                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row> -->
        </el-tree>
      </div>

    </el-card>

    <!-- 添加部门对话框 -->
    <el-dialog title="添加部门" :visible.sync="dialogFormVisible" @close="close">
      <el-form ref="refForm" :model="form" :rules="rules">
        <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门编码" :label-width="formLabelWidth" prop="code">
          <el-input v-model="form.code" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门负责人" :label-width="formLabelWidth" prop="manager">
          <el-select v-model="form.manager" placeholder="请选择活动区域">
            <el-option v-for="item in employee" :key="item.id" :label="item.username" :value="item.username" />
          </el-select>=={{ form.manager }}
        </el-form-item>
        <el-form-item label="部门介绍" :label-width="formLabelWidth" prop="introduce">
          <el-input v-model="form.introduce" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addHandle">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑部门对话框 -->
    <el-dialog title="编辑部门" :visible.sync="dialogFormVisibleEdit" @close="close">
      <el-form ref="refForm" :model="formEdit" :rules="rules">
        <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formEdit.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门编码" :label-width="formLabelWidth" prop="code">
          <el-input v-model="formEdit.code" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门负责人" :label-width="formLabelWidth" prop="manager">
          <el-select v-model="formEdit.manager" placeholder="请选择活动区域">
            <el-option v-for="item in employee" :key="item.id" :label="item.username" :value="item.username" />
          </el-select>=={{ formEdit.manager }}
        </el-form-item>
        <el-form-item label="部门介绍" :label-width="formLabelWidth" prop="introduce">
          <el-input v-model="formEdit.introduce" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="editHandle">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  TreeTool
} from '@/utils/TreeTools'
import treeTools from './components/tree-tools.vue'
import {
  getEmployeeSimple
} from '@/api/employees'
import {
  getDepartments,
  addDepartments,
  delDepartments,
  editDepartments
} from '@/api/departments'
export default {
  name: '',
  components: {
    treeTools
  },
  data() {
    return {
      loading: false,
      // activeName: 'first'
      depts: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      nodeTree: {},
      dialogFormVisible: false,
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: '',
        pid: '' //  表示一级
      },
      formLabelWidth: '120px',
      employee: [],
      rules: {
        name: [{
          required: true,
          message: '请输入部门名称',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '请输入部门编码',
          trigger: 'blur'
        }],
        manager: [{
          required: true,
          message: '请输入部门负责人',
          trigger: 'blur'
        }],
        introduce: [{
          required: true,
          message: '请输入部门介绍',
          trigger: 'blur'
        }]
      },

      //  编辑
      formEdit: {
        name: '',
        code: '',
        manager: '',
        introduce: '',
        pid: '' //  表示一级
      },
      dialogFormVisibleEdit: false
    }
  },
  created() {
    this.loading = true
    // setTimeout(() => {
    //   this.getDep()
    // }, 3000)
    this.getDep()
  },
  methods: {
    async getDep() {
      const res = await getDepartments().catch(err => err)
      //  title
      this.nodeTree = {
        name: res.companyName,
        id: ''
      }
      this.depts = TreeTool(res.depts, 'pid', 'id') //  将数据处理成属性结构类型
      this.loading = false
    },
    //  点击添加部门显示对话框
    add(id) {
      this.getEmployee() //  获取部门负责人
      this.dialogFormVisible = true
      this.form.pid = id
    },
    //  获取 获取员工简单列表
    async getEmployee() {
      try {
        const res = await getEmployeeSimple()
        // console.log(res, 666)
        this.employee = res
      } catch (err) {
        return err
      }
    },
    //  点击取消按钮
    close() {
      //  关闭对话框
      this.dialogFormVisible = false
      this.dialogFormVisibleEdit = false
      //  初始化表单值
      this.form = {
        name: '',
        code: '',
        manager: '',
        introduce: '',
        pid: ''
      }
      this.formEdit = {}
      //  重置
      this.$refs['refForm'].resetFields()
    },

    //  点击对话框确认按钮
    addHandle() {
      this.$refs['refForm'].validate(async(valid) => {
        if (valid) {
          //  表示成功
          if (!this.form.manager) {
            return alert('请选择管理者')
          }
          await addDepartments(this.form)
          //  成功后
          this.close() //  初始化表单数据
          //  重新获取数据
          this.getDep()
        } else {
          return false
        }
      })
    },
    //  删除部门
    del(id) {
      this.$confirm('是否删除此条记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        //  点击的确认按钮
        await delDepartments(id)

        this.$message({
          type: 'success',
          message: '删除成功！！！!'
        })

        //  刷新页面
        this.getDep()
      }).catch(() => {
        //  点击的取消按钮
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑
    edit(item) {
      this.dialogFormVisibleEdit = true
      console.log(item, 888)
      this.formEdit = item
    },
    async  editHandle() {
      await editDepartments(this.formEdit)
      this.close()
      this.getDep()
    }
  }
}

</script>
<style lang='scss' scoped>
  .departments-container {
    .title {
      padding-bottom: 7px;
      border-bottom: 3px solid #409eff;
    }

    .el-tree {
      .el-row {
        width: 100%;

        .el-col {
          height: 30px;
          line-height: 30px;
        }
      }
    }

    .box-card {
      .main-box {
        width: 80%;
        margin: 50px auto;
      }
    }
  }

</style>
